<template>
  <FormItemWrapper :component="component">
    <CheckboxGroup v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
                   :size="component.compConfigData.widgetConfig.size"
                   @on-change="onChangeHandler"
    >
      <Checkbox :label="radio.value"
             :key="index"
             v-for="(radio, index) in component.compConfigData.widgetConfig.checkboxs"
             :disabled="radio.disabled"
      >
        {{radio.label}}
      </Checkbox>
    </CheckboxGroup>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemCheckboxWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, '多选框'),
      widgetConfig: {
        size: 'default',
        checkboxs: [
          {label: '选项1', value: 'value1', disabled: false},
          {label: '选项2', value: 'value2', disabled: false},
        ]
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '数据改变时触发', resultValues: ['value'], code: ''},
      })

    })
  },
  data() {
    return {}
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onChangeHandler(value) {
      this.runWidgetEventCode('onChange', (fn)=>{
        fn.call(this, value)
      })
    },
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
